<template>
	<view class="article_details">
		<!-- 文章头部 -->
		<view class="article_tit">
			<!-- <image class="tit_img" :src="require('../../../status/image/timg.png')" mode=""></image> -->
			<view class="tit_con">
				<p>{{articleDetailsInfo.title}}</p>
				<text style="margin-right: 20rpx; color: #067a9a;">{{articleDetailsInfo.auth}}</text>
				<text>{{articleDetailsInfo.create_time}}</text>
			</view>
			<image @click="setSharepopup" class="tit_share" :src="require('../../status/image/share.png')" mode=""></image>
		</view>
		<!-- 视频区域 -->
		<view class="article_video" v-if="articleDetailsInfo.video">
			<video id="article_video" :src="articleDetailsInfo.video"></video>
		</view>
		<!-- 文章详情 -->
		<view class="article_con" v-html="articleDetailsImg">
		
		</view>  
		<sharePage :isShowSharePage="isShowSharePage" :shareList="shareList" :forwardingTips="forwardingTips" :urls="urls"></sharePage>
	</view>
</template>

<script>
	import sharePage from '../../compon/sharepage.vue';
	export default {
		components: {
			sharePage
		},
		onLoad(options) {
			this.articleDetails(options.id)
			this.id = options.id
			uni.$on('changeShare', (type) => {
				this.isShowSharePage = type
			})
			uni.$on('changeForwardingTips',(type) => {
				this.forwardingTips = type
			})
		}, 
		data() {
			return {
				articleDetailsInfo: {},
				// 文章详情
				articleDetailsImg:{},
				// 显示隐藏分享弹框
				isShowSharePage: false,
				// 提示
				forwardingTips: false, 
				id: null,
				urls: null,
				shareList: [{
						img: require('../../status/image/weixin.png'),
						text: '微信',
						type: 'share',
						
					},
					{
						img: require('../../status/image/pyq.png'),
						text: '微信朋友圈',
						type: ''
					}, 
					{
						img: require('../../status/image/lj.png'),
						text: '拷贝',
						type: ''
					}

				]
			};
		},
		onShow() {
			this.urls = '/page/index/articledetails/index?id=' + this.id 
		},
		//转发
		onShareAppMessage(res) {
			if (res.from === 'button') {
				console.log("来自页面内按钮分享")
			}
			return {
				path: '/page/index/articledetails/index?id=' + this.id ,
				title: this.articleDetailsInfo.title,
			}
		},  
		onShareTimeline(){
			if (res.from === 'button') {
				console.log("来自页面内按钮分享")
			}
			return {
				path: '/page/index/articledetails/index?id=' + this.id,
				title: this.articleDetailsInfo.title,
			}
		},
		methods: {
			articleDetails(id) {
				this.$api.sendRequest({
					url: '/api/article/detail?id=' + id,
					success: res => { 
						if (res.code >= 0) {
							this.articleDetailsInfo = res.data
							this.articleDetailsImg = res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');  
						}
					}
				})
			},
			setSharepopup() {
				this.isShowSharePage = true
			}
		}
	}
</script>

<style lang="less" scoped> 
	.article_details {
		padding: 20rpx; 
		.article_tit {
			display: flex;

			.tit_img {
				margin: auto 30rpx auto 0;
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.tit_con {
				flex: 1;
				color: #545454;

				p {
					margin-bottom: 10rpx;
					font-weight: 700;
					font-size: 38rpx; 
				}
			}

			.tit_share { 
				width: 50rpx;
				height: 50rpx;
			}
		}

		.article_video {
			margin-top: 10rpx;
			width: 100%;

			#article_video {
				width: 100%;
			}
		}

		.article_con {
			margin-top: 20rpx;  
			line-height: 54rpx;
			letter-spacing: 6rpx;  
		}   
	}
</style>
